<template>
  <view class="elevtor-card">
    <view class="card_item" @click="toEleDetail">
      <view class="top_left">
        <text style="vertical-align: middle"> {{ msg.elevatorAddress||'-' }}</text>
        <uni-icons
          color="#999"
          size="16"
          type="arrowright"
          v-if="msg.elevatorId != 0"
        />
      </view>
      <view
        class="guide"
        @click.stop="handleGuide"
        v-if="msg.isHistory === '1'"
      >
        <image src="/static/images/locations.png" mode=""></image>
        <view>导航</view>
      </view>
    </view>
    <view class="card_item toInfo" @click="toInfo" v-if="msg.elevatorId != 0">
      <view class="elevtor_left">
        <view class="brand">{{ msg.brandName || "-" }}</view>
        <view class="private-num">{{ msg.privateNum || "-" }}</view>
      </view>
      <view class="elevto_right" v-if="!msg.isFull && msg.isHistory === '1'">
        <image
          src="@/static/images/tips.png"
          class="close"
          style="width: 32rpx; height: 32rpx"
        ></image>
        <uni-icons color="#999" size="18" type="arrowright" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
	props: {
		msg: {
			type: Object,
		},
	},
	data() {
		return {
			isFull: false,
		};
	},
	created() {},
	computed: {
		// showIcon() {
		// 	if(t){
		// 	}
		// }
	},
	methods: {
		// 跳转电梯详情
		toEleDetail() {
			console.log('this.msg',this.msg);
			if (!this.msg.elevatorId || this.msg.elevatorId == 0) {
				return;
			}
			uni.navigateTo({
				url: `/subpages/elevator/projectInfo/eleDetail?id=${this.msg.elevatorId}`,
			});
		},
		getAliasStr(str) {
			if (!str) {
				return '';
			}
			if (str.length > 20) {
				return '(项目别名：' + str.slice(0, 20) + '...)';
			} else {
				return '(项目别名：' + str + ')';
			}
		},
		// 导航
		handleGuide() {
			console.log('救援');
			const {
				buildingName,
				relationAlias,
				latitude,
				longitude,
				buildingAddress,
			} = this.msg;
			let alias = relationAlias;
			let aliasName = alias.length
				? alias
					.map((item) => {
						return item.alias;
					})
					.join(',')
				: '';
			uni.getLocation({
				type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
				success: (res) => {
					uni.openLocation({
						latitude: Number(latitude),
						longitude: Number(longitude),
						name: buildingName + this.getAliasStr(aliasName),
						address: buildingAddress,
						scale: 18,
						success: () => {
							console.log('success');
						},
					});
				},
			});
		},
		toInfo() {
			console.log('区电梯也', this.msg);
			if (!this.msg.elevatorId || this.msg.elevatorId == 0) {
				return;
			}
			uni.navigateTo({
				url: `/subpages/elevator/projectInfo/elevatorInfoPage?id=${this.msg.id}`,
				complete: (e) => {
					console.log(e);
				},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.elevtor-card {
  .card_item {
    position: relative;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    margin-bottom: 8rpx;
    font-size: 24rpx;

    image {
      width: 32rpx;
      height: 32rpx;
    }

    .elevtor_left {
      display: flex;

      .brand {
        padding-right: 10rpx;
        border-right: 1px solid #ccc;
      }

      .private-num {
        padding-left: 10rpx;
      }
    }

    .elevto_right {
      // position: relative;
      // z-index: 100;
      display: flex;
      align-items: center;
    }

    .top_left {
      font-size: 42rpx;
      font-weight: 600;
      word-break: break-word;
      color: #333;
      width: 440rpx;
    }

    .guide {
      display: flex;
      // flex: 1;
      margin-left: auto;
      justify-content: flex-end;
      color: #666;
      position: relative;
      z-index: 110;
    }

    .brand {
      padding-right: 10rpx;
      border-right: 1px solid #999;
    }
  }

  .toInfo {
    position: relative;
    z-index: 110;
  }
}
</style>
